<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>base</title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 开发环境版本，包含了用帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body style="margin:100px">
  <div id="app">
    <template>
      <el-select v-model="selectedClassId" placeholder="请选择" @change="studentChange(selectedClassId)">
        <el-option v-for="item in classes" :key="item.id" :label="item.name" :value="item.id">{{item.name}}
      </el-option>
    </template>
    <template>
      <el-select v-model="selectedStuNo" placeholder="请选择">
        <el-option v-for="item in students" :key="item.stuNo" :label="item.name" :value="item.stuNo">
        </el-option>
      </el-select>
    </template>
  </div>

  <script>
    var BASE_URL = "http://localhost:8088/data"
    var vm = new Vue({
      el: '#app',
      data: {
        selectedClassId: '',
        selectedStuNo: '',
        classes: [],
        students: []
      },
      created () {
        this.selectedClassId = "1"
        this.getClasses()
        this.studentChange(this.selectedClassId)
        this.selectedStuNo = "1003"
      },
      methods: {
        getClasses() {
          const _self = this
          axios.get(BASE_URL + '/class')
          .then(function (response) {
            _self.classes = response.data.data
          })
          .catch(function (error) {
            console.log(error);
          });
        },
        studentChange (classId) {
          const _self = this
          axios.get(BASE_URL + '/student/' + parseInt(classId))
          .then(function (response) {
            _self.students = response.data.data
          })
          .catch(function (error) {
            console.log(error);
          });
        }
      }
    })
  </script>
</body>

</html>